<template>
  <el-form label-width="100px">
    <div style="display: flex;">
      <el-form-item label="所属分类id">
        <div class="block">
          <el-cascader v-model="form.cid" :options="category" :show-all-levels="false" :props="{ children: 'child', value: 'id', label: 'typename', expandTrigger: 'hover', checkStrictly: true, emitPath: false }" clearable />
        </div>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item label="文章标题">
        <el-input v-model="form.title" />
      </el-form-item>
    </div>
    <div style="display: flex;">
      <el-form-item label="图片">
        <el-upload class="upload-demo" :action="(apiUrl+'/EXCHANGE-API/api/uploadFile')" :on-success="uploadSuccess" :limit="1" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <!-- <el-input v-model="form.thumb" /> -->
      </el-form-item>
    </div>
    <el-form-item label="文章内容">
      <Tinymce v-model="form.body" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Tinymce from '@/components/Tinymce/index'
export default {
  components: { Tinymce },
  data() {
    return {
      form: {},
      category: []
    }
  },
  created() {

    this.initCategory()
    const article = window.localStorage.getItem('article')

    if (article) {
      this.form = JSON.parse(article)
      window.localStorage.removeItem('article')
    }
  },
  methods: {
    initCategory() {
      this.$api.get('/api/basic/category', {page:1,size:200}).then((res) => {
        this.category = res.data
      })
    },
    handleSubmit() {
      this.$api.put('/api/basic/article', {}, this.form).then((res) => {
        this.$api.go('/basic/article')
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    uploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.form['thumb'] = response.data.domain + response.data.path
      }
    }
  }
}
</script>

<style></style>
